<template>
  <div class="hello">
    <div class="hello_content">
      <el-scrollbar style="overflow-y:hidden;overflow-x:hidden;"
        @mousewheel.native="slide"
        ref="roll">
        <div class="hello_title" v-for="(item, index) in labelData" :key="index" :class="[$route.path == item.path?'initial' : '']" > 
          <router-link :to="item.path" tag="div">
            <span @contextmenu.prevent="rightShow(item,index,$event)">{{item.title}}<i class="el-icon-close" @click="deletes(index)"></i></span> 
          </router-link>
        </div>
      </el-scrollbar>
        <ul class="contextmenu" :style="'left:' + this.lefts + 'px;top:' + this.tops + 'px;'"
         v-if="rightBeat">
          <li @click="refresh">刷新</li>
          <li @click.prevent="splices()">关闭</li>
          <li @click.prevent="deleteRests()">关闭其它</li>
          <li @click.prevent="deleteaAll()">关闭所有</li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  // 'watch': {
  //   $route(value){
  //     console.log(this.labelData,value)
  //   }
  // },
  props: ["labelData"],
  data() {
    return {
      rightBeat: false,
      show:false,
      path:'',
      tops:0,
      lefts:0,
      indexs:"",
      present:"",
      items:""
    };
  },
  created() {
    // console.log(this.labelData);
  },
  methods: {
    // 获取菜单栏的坐标
    rightShow(i,x,e) {
      console.log(x);
      this.present = this.$route.path;
      this.rightBeat=!this.rightBeat;
      this.lefts = e.clientX;
      this.tops = e.pageY;
      this.indexs=x;
      this.items=i;
    },
    // 刷新
    refresh(){
      this.$router.replace({
        path: "/About",
        query: {
          list: this.items.path
        }
      });
    },
    // 删除当前下标
    deletes(e){
      if (e!=0) {
       this.labelData.splice(e, 1)
      }
    },
    splices(){
       if (this.indexs!=0) {
       this.labelData.splice(this.indexs, 1)
      }
    },
    // 关闭其他
    deleteRests(){
       this.labelData.splice(0, this.labelData.length, this.labelData[this.indexs]); //关闭其它就跳到路由
       this.indexs = 0;
      if (this.labelData[0].path != this.$route.path) {
        this.$router.push(this.labelData[0]);
      }
    },
    // 关闭所有
    deleteaAll(){
        this.labelData.splice(0,this.labelData.length)
        this.labelData.push({title:'首页',path:'/Directory'})
        this.$router.push({title:'首页',path:'/Directory'})
    },
       //滚动
    slide(e) {
      e || window.event;
      if (e.wheelDelta > 0) {
        this.$refs.roll.wrap.scrollLeft = this.$refs.roll.wrap.scrollLeft + 30; //向左滚动
      }
      if (e.wheelDelta < 0) {
        this.$refs.roll.wrap.scrollLeft = this.$refs.roll.wrap.scrollLeft - 30; //向右滚动
      }
    },
    // 关闭菜单栏的状态
    clickState(){
      this.rightBeat=false
    }
  },
  mounted() {
    document.addEventListener("click", this.clickState); //调用关闭状态
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  width: 100%;
  height: 35px;
  border-top: 1px solid #d8dce5;
  border-bottom: 1px solid #d8dce5;
  font-size: 1px;
}
.initial{
  background: #0BADF9 !important;
  color: #FFFFFF !important;
}
.contextmenu {
  position: fixed;
  margin: 0;
  background: #fff;
  z-index: 2;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
  margin: 0;
  padding: 0px 16px;
  cursor: pointer;
}
/* 滚动条 */
.el-scrollbar/deep/.el-scrollbar__wrap {
  overflow-y: hidden;
  overflow-x: hidden;
}

.hello_content {
  width: 97%;
  height: 34px;
  line-height: 30px;
  display: flex;
  text-align: center;
  margin: 3px auto;
}
.hello_title i {
  width: 20px;
  padding-left: 2px;
}

.hello_title {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: rgba(255, 255, 255, 0.8);
  padding: 0 8px;
  font-size: 12px;
  margin-left: 7px;
  border-radius: 3px;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
  padding-right: 0px 50px;
}
.el-scrollbar__view {
  margin-right: 30px;
}
</style>
